<template>
  <border-box title="内容编辑">
    <j-form-container :disabled="disabled">
      <a-form-model :model="form"
                    :rules="rules"
                    ref="formModel"
                    v-bind="layout">
        <a-form-model-item label="活动类型" prop="activityType">
          <a-radio-group v-model="form.activityType">
            <a-radio :value="1">线上</a-radio>
            <a-radio :value="2">线下</a-radio>
            <a-radio :value="3">进内部</a-radio>
            <a-radio :value="4">其他</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="主题">
          <a-select labelInValue v-model="form.theme">
            <a-select-option v-for="(item,index) of themeList" :key="index" :value="item.id">
              {{item.themeName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="活动主图">
          <image-choose v-model="form.imgUrl1">活动主图从素材库中选择</image-choose>
        </a-form-model-item>
        <a-form-model-item label="活动标题" prop="activityTitle">
          <a-input v-model="form.activityTitle"></a-input>
        </a-form-model-item>
        <a-form-model-item label="活动描述">
          <a-textarea v-model="form.activityIntroduction"></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="报名人数">
          <a-input-number style="width:100%;" v-model="form.applyLimitNum" placeholder="不填则不限制人数"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="活动时间" prop="beginTime">
          <j-date :show-time="true" placeholder="开始时间" date-format="YYYY-MM-DD HH:mm:ss" style="width:100%;"
                  v-model="form.beginTime"></j-date>
          <j-date :show-time="true" placeholder="结束时间" date-format="YYYY-MM-DD HH:mm:ss" style="width:100%;"
                  v-model="form.endTime"></j-date>
        </a-form-model-item>
        <a-form-model-item label="报名截止时间" prop="applyEndTime">
          <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width:100%;"
                  v-model="form.applyEndTime"></j-date>
        </a-form-model-item>
        <a-form-model-item label="活动地址" prop="activityAddr">
          <a-input v-model="form.activityAddr"></a-input>
        </a-form-model-item>
        <div style="height:130px;width:100%;position: relative;margin-bottom:55px;">
          <el-amap-search-box
            class="search-box"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
            :center="center"
            style="top:10px;left: 1%;background-color:#ededed;box-shadow:none;z-index:99;
          margin-bottom: 20px;width:100%"></el-amap-search-box>
          <el-amap vid="amap" class="amap-demo" :center="center" :zoom="zoom" :events="events">
            <el-amap-marker
              v-for="(marker, index) in markers"
              :key="index"
              :position="marker.position"
              :vid="index"></el-amap-marker>
          </el-amap>
        </div>
      </a-form-model>
    </j-form-container>
  </border-box>
</template>

<script>
  import BorderBox from "../BorderBox";
  import {getAction} from "@/api/manage";
  import ImageChoose from "../ImageChoose";
  import moment from 'moment'

  export default {
    name: "ActivityContentForm",
    components: {ImageChoose, BorderBox},
    props: {
      params: {},
      disabled: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        rules: {
          activityType: [
            {required: true, message: '请选择活动类型', trigger: 'blur'},
          ],
          activityTitle: [
            {required: true, message: '请输入标题', trigger: 'blur'},
          ],
          beginTime: [
            {required: true, message: '请选择活动时间', trigger: 'change'},
          ],
          applyEndTime: [
            {required: true, message: '请选择报名截止时间', trigger: 'change'},
          ],
          activityAddr: [
            {required: true, message: '请填写活动地址', trigger: 'change'},
          ]
        },
        form: {
          activityAddr: ''
        },
        themeList: [],
        layout: {
          labelCol: {md: 8, lg: 7},
          wrapperCol: {md: 16, lg: 17},
        },
        center: [121.59996, 31.197646],
        lng: undefined,
        lat: undefined,
        zoom: 12,
        markers: [],
        events: {
          click: (e) => {
            let {lng, lat} = e.lnglat;
            this.lng = lng;
            this.lat = lat;
            this.markers = [{position: [lng, lat]}];
            let that = this;
            // 这里通过高德SDK 完成。
            let geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: 'all'
            });
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  const address = result.regeocode.formattedAddress;
                  that.form.activityAddr = address;
                }
              }
            })
          }
        },
        searchOption: {
          city: '南京',//默认全国
          citylimit: false
        },
      }
    },
    created() {
      this.loadTheme();
      this.queryInfo();
    },
    methods: {
      //主题
      loadTheme() {
        getAction('them/thmThemeInfo/list').then(res => {
          if (res.success) {
            this.themeList = res.result.records;
          }
        })
      },
      queryInfo() {
        getAction('task/taskInfo/queryTaskContentInfo', this.params).then(res => {
          if (res.success) {
            const {
              activityType, imgUrl1, activityTitle, activityIntroduction,
              applyLimitNum, applyEndTime, activityAddr, beginTime, endTime,
              latitude, longitude,themeId,themeName
            } = res.result;
            const tempForm = {
              activityType, imgUrl1, activityTitle, activityIntroduction,
              applyLimitNum, applyEndTime, activityAddr, beginTime, endTime
            };
            if (latitude && longitude) {
              this.lng = longitude;
              this.lat = latitude;
              this.center = [longitude, latitude]
            }
            if (themeId) {
              tempForm.theme = {key: themeId, label: themeName};
            }
            this.form = tempForm;
          }
        })
      },
      rangeChange(dates, dateStrings) {
        this.form.beginTime = dateStrings[0];
        this.form.endTime = dateStrings[1];
      },
      selfValidate() {
        return new Promise((resolve, reject) => {
          this.$refs.formModel.validate(validate => {
            if (validate) {
              this.form.latitude = this.lat;
              this.form.longitude = this.lng;
              if (this.form.theme) {
                this.form.themeId = this.form.theme.key;
                this.form.themeName = this.form.theme.label;
              }
              resolve({key: 'activityContentInfo', value: this.form});
            } else {
              reject('请填写活动内容必要信息');
              return false;
            }
          })
        })
      },
      getContentInfo() {
        return this.form;
      },
      onSearchResult(pois) {
        if (pois && pois.length > 0) {
          const forstPoint = pois[0];
          const address = forstPoint.address;
          this.form.activityAddr = address;
        }
        let latSum = 0;
        let lngSum = 0;
        pois.forEach((poi) => {
          lngSum += poi.lng;
          latSum += poi.lat;
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.center = [center.lng, center.lat];
        this.lng = center.lng;
        this.lat = center.lat;
        this.markers = [{position: [center.lng, center.lat]}];
      },
    }
  }
</script>

<style scoped>
  /deep/ .el-vue-search-box-container .search-box-wrapper {
    left: 10px;
    width: 90%;
    padding: 5px 0;
  }

  /deep/ .el-vue-search-box-container .search-box-wrapper input {
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
  }

</style>